<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@ include file="/common/common.jsp" %>
    <meta name="format-detection"
          content="telephone=no,email=no,date=no,address=no">
    <title>添加收款员</title>
    <link rel="stylesheet" type="text/css" href="../statics/aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx }/css/weui.min.css"/><%--
    <link rel="stylesheet" type="text/css" href="${ctx }/css/jquery-weui.css"/>--%>
</head>
<body>
<section class="aui-content">
    <ul class="aui-list">

        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">收款员姓名</div>
                <div class="aui-list-item-inner  ">
                    <input type="text" id="name" name="name" class="merchantBlur" maxlength="5" placeholder="请输入收款员姓名">
                </div>
            </div>
        </li>

        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">所属商户</div>
                <div class="aui-list-item-inner  ">
                    <input type="text" id="merchantName" name="merchantName" style="ime-mode:disabled" onfocus="this.blur()" readonly="readonly" placeholder="请选择所属商户">
                    <input type="hidden" id="merchantNo" name="merchantNo" >
                </div>
            </div>
        </li>

        <li class="aui-list-item   ">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-media" style="width: 6rem;">收款员手机号</div>
                <div class="aui-list-item-inner  ">
                    <input type="tel" id="mobile" name="mobile" class="merchantBlur"  maxlength="11" onkeyup="repNumber(this)"
                           style="width: 8rem;" placeholder="请输入收款员手机号">
                </div>
            </div>
        </li>
    </ul>
</section>

<section class="aui-content" style="margin-top: 14px; padding-left: 20px; padding-right: 20px;">
    <p>
    <button id="submitBtn" class="aui-btn aui-btn-info  aui-btn-block" onclick="addCashier()" style="border:0px;">确定</button>
    </p>
</section>

<!-----------------请选择所属用途-----弹层---------------->
<div>
    <div class="weui-mask" id="iosNdMask" style="display: none"></div>
    <div class="weui-actionsheet" id="iosNdActionsheet">
        <div class="weui-actionsheet__title">
            <p class="weui-actionsheet__title-text">请选择所属用户</p>
        </div>
        <div style="overflow-y:scroll;max-height:200px;">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell colorPrimary" cashiersId="${merchant.merchantNo}">${merchant.username}/${merchant.shopname}</div>
            </div>
            <c:forEach items="${merchantInfoList}" var="merchantInfo">
                <div class="weui-actionsheet__menu">
                    <div class="weui-actionsheet__cell colorPrimary" cashiersId="${merchantInfo.merchantNo}">${merchantInfo.username}/${merchantInfo.shopName}</div>
                </div>
            </c:forEach>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosNdActionsheetCancel">取消</div>
        </div>
    </div>
</div>
<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="DialogMessage"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary DeleteDefault">确定</a>
            </div>
        </div>
    </div>
    <div class="js_dialog" id="iosDialog3" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="DialogMessages"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary DeleteDefaults">确定</a>
            </div>
        </div>
    </div>
</div>
<!-----------------请选择所属用户-----弹层---------------->

<!-- 选择框美化 -->
<script type="text/javascript">
    //请选择所属用户
    var $iosNdActionsheet = $('#iosNdActionsheet');
    var $iosNdMask = $('#iosNdMask');
    function hideNdActionSheet() {
        $iosNdActionsheet.removeClass('weui-actionsheet_toggle');
        $iosNdMask.fadeOut(200);
    }
    $iosNdMask.on('click', hideNdActionSheet);
    $('#iosNdActionsheetCancel').on('click', hideNdActionSheet);
    $("#merchantName").on("click", function(){
        $iosNdActionsheet.addClass('weui-actionsheet_toggle');
        $iosNdMask.fadeIn(200);
    });
    $(".colorPrimary").on("click", function(){
        var cashiersId = $(this).attr("cashiersId");
        var namePhone = $(this).text();
        $("#merchantName").val(namePhone);
        $("#merchantNo").val(cashiersId);
        hideNdActionSheet();
    });

    //错误提示弹框
    var $iosDialog2 = $('#iosDialog2');
    var $iosDialog3 = $('#iosDialog3');
    $('#dialogs').on('click', '.DeleteDefault', function(){ //取消按钮事件
        $(this).parents('.js_dialog').fadeOut(200);
    });
    /*$('#dialogs').on('click', '.DeleteDefaults', function(){ //取消按钮事件
        $(this).parents('.js_dialog').fadeOut(200);
        location.href = "viewCashierList";
    });*/

    /**
     * 只能输入数字
     * @param obj
     * @returns
     */
    function repNumber(obj) {
        var reg = /^[\d]+$/g;
        if (!reg.test(obj.value)) {
            var txt = obj.value;
            txt.replace(/[^0-9]+/, function (char, index, val) {//匹配第一次非数字字符
                obj.value = val.replace(/\D/g, "");//将非数字字符替换成""
                var rtextRange = null;
                if (obj.setSelectionRange) {
                    obj.setSelectionRange(index, index);
                } else {//支持ie
                    rtextRange = obj.createTextRange();
                    rtextRange.moveStart('character', index);
                    rtextRange.collapse(true);
                    rtextRange.select();
                }
            })
        }
    }

    function addCashier() {
    	
        var name = $("#name").val();
        var mobile = $("#mobile").val();
        var merchantName = $("#merchantName").val();

        if (name.trim() == null || name.trim() == "" || name.trim().length == 0) {
            $("#DialogMessage").html("请输入收款员姓名!");
            $iosDialog2.fadeIn(200);
            return;
        }
        if (merchantName.trim() == null || merchantName.trim() == "" || merchantName.trim().length == 0) {
            $("#DialogMessage").html("请选择所属商户!");
            $iosDialog2.fadeIn(200);
            return;
        }
        if (mobile.trim() == null || mobile.trim() == "" || mobile.trim().length == 0) {
            $("#DialogMessage").html("请填写收款员手机号!");
            $iosDialog2.fadeIn(200);
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(mobile.trim()))) {
            $("#DialogMessage").html("请输入正确的手机号!");
            $iosDialog2.fadeIn(200);
            return false;
        }
        $("#submitBtn").attr("disabled","disabled");
        var merchantNo = $("#merchantNo").val();
        $.ajax({
            type: "POST",
            url: "addCashier",
            data: {name: name, mobile: mobile,merchantNo:merchantNo},
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    $("#DialogMessages").html(""+result.msg);
                    $iosDialog3.fadeIn(200);
                    $(".DeleteDefaults").on("click", function () {
                        $(this).parents('.js_dialog').fadeOut(200);
                        location.href = "viewCashierList";
                    });
                }else{
                    $("#DialogMessage").html(""+result.msg);
                    $iosDialog2.fadeIn(200);
                }
                $("#submitBtn").removeAttr("disabled");
            }
        });
    }
</script>
</body>
</html>